<template>
  <!-- 自定义表格 -->
  <div :class="{ bg: tableConfig.hasbg, myTable: true, myIcon: tableConfig.hasIcon }">
    <!-- 自定义表格上方信息--左右插槽 -->
    <div class="myHeader">
      <slot name="mCardLeft"></slot>
      <slot name="mCardRight"></slot>
    </div>
    <!-- 自定义表格卡片--中间插槽 -->
    <div class="myBody">
      <slot name="myTableBody"></slot>
    </div>
    <!-- 自定义表格-->
    <!-- v-adaptive="tableconfig.bottomset"
      :height="tableconfig.height" -->
    <a-table fit @selection-change="handleSelectChange" @cell-dblclick="doDoubleClick" @cell-mouse-enter="doCellHover"
      @cell-mouse-leave="doCellLeave" @row-click="doRowClick" @sort-change="handleSortChange" @select-all="doSelectAll"
      @select="doSelect" :cell-style="handleCellStyle" :row-class-name="setIndex" :loading="tableConfig.loading"
      ref="table" :dataSource="tableConfig.tableData" :height="tableConfig.height" :max-height="tableConfig.maxHeight"
      border :row-key="tableConfig.thead[0].label" :header-cell-style="{ background: '#F0F0F0', color: '#1A2035', }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <!-- 表格是否可扩展 -->
      <a-table-column v-if="tableConfig.isExpand" title=" " min-width="40px" style="text-align: center">
        <!-- 有扩展项显示加 -->
        <template slot-scope="scope" v-if="scope.row.children">
          <span style="margin: 0 auto; display: table; font-weight: bold; cursor: pointer"
            @click="toggleExpand(scope.row)">-+-</span>
        </template>
        <!-- 无扩展项显示空白 -->
        <template v-else slot-scope="scope">
          <span style="margin: 0 auto; display: table">{{ scope.row }}</span>
        </template>
      </a-table-column>
      <template slot="empty">
        <img :src=`url(${require('../../assets/img/empty.png')})` style="margin-top: 180px;width: 300px;" fit="fill" />
      </template>
      <!-- 表格是否显示首列index -->
      <a-table-column type="index" :index="indexMethod" v-if="tableConfig.isIndex" width="50px" title="序号" align="center"
        :fixed="tableConfig.isFixed"> </a-table-column>
      <!-- 表格是否可多选 -->
      <a-table-column type="selection" v-if="tableConfig.isSelection" width="50px" align="center"
        :selecTable="checkStatus" :fixed="tableConfig.isFixed"> </a-table-column>
      <!-- 循环渲染表头 -->
      <template v-for="item in tableConfig.thead">
        <!-- 如果表头属性为function,执行回调 -->
        <a-table-column v-if="item.type == 'function'" :show-overflow-tooltip="true" :sortable="item.sort"
          :key="item.prop + item.label" :prop="item.prop" align="center" :min-width="item.width || ''" :title="item.label"
          :fixed="item.fixed || false">
          <template slot-scope="scope">
            {{ item.callback(scope.row) }}
          </template>
        </a-table-column>
        <!-- 如果表头属性为slot,执行插槽,插槽名为该列属性 -->
        <a-table-column v-else-if="item.type == 'slot'" :show-overflow-tooltip="true" :sortable="item.sort"
          :key="item.prop + item.label" :prop="item.prop" :min-width="item.width || ''" align="center" :title="item.label"
          :fixed="item.fixed || false">
          <template slot-scope="scope">
            <slot :data="scope.row" :name="item.prop"></slot>
          </template>
        </a-table-column>
        <!-- 其他情况默认渲染 -->
        <a-table-column v-else :show-overflow-tooltip="true" :key="item.prop + item.label" :sortable="item.sort"
          :prop="item.prop" align="center" :title="item.label" :min-width="item.width || ''" :fixed="item.fixed || false">
        </a-table-column>
      </template>
    </a-table>

    <!-- 分页部分 -->
    <div>
      <a-pagination :disabled="tableConfig.loading" v-if="tableConfig.isPagination"
        :current-page="tableConfig.currentPage" :page-sizes="tableConfig.pageSizes" :page-size="tableConfig.pageSize"
        :total="tableConfig.total" :default-page-size="tableConfig.pageSize" background
        :class="{ 'system-pagination': hasClassSystemPagination, normal: !hasClassSystemPagination }"
        layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-table',
  data() {
    return {
      // 表格配置

      tableConfig: {
        loading: false,
        // top部分背景色
        hasBg: true,
        //top部分是否蓝色竖条
        hasIcon: false,
        // 是否表格行可展开
        isExpand: false,
        // 是否还有可选择列
        isSelection: true,
        // 首列index
        isIndex: true,
        isFixed: false,
        // 是否显示分页
        isPagination: true,
        // 默认高度
        size: '',
        maxHeight: undefined,
        height: '100px',
        // 表头
        thead: [],
        // 表格渲染数据
        tableData: [],
        // 当前页
        currentPage: 1,
        // 每页显示数据条数数
        pageSizes: [10, 20, 50, 100],
        //每页显示数据条数
        pageSize: 10,
        // 数据总条数
        total: 10,
        rect: '',
        bottomSet: { bottomOffset: 80 },
      },
    };
  },
  props: {
    config: {
      type: Object,
      default: () => { },
    },
  },
  created() { },
  mounted() {
    // 获取table高度;
    this.handleHeightChange();
    this.initConfig();
    // 执行该方法表格回到顶端
    // this.$on('handleGoTop', () => {
    //     setTimeout(() => {
    //         this.$refs.table.bodyWrapper.scrollTop = 0;
    //     }, 200);
    // });
  },
  methods: {
    //绑定row-key 防止唯一性
    initConfig() {
      for (let key in this.config) {
        if (Object.keys(this.tableConfig).includes(key)) {
          this.tableConfig[key] = this.config[key];
        }
      }
    },
    // 高度变化执行
    handleHeightChange() {
      // setTimeout(() => {
      //     const height =
      //         window.innerHeight -
      //         this.$refs.table.$el.getBoundingClientRect().top -
      //         this.tableconfig.bottomset.bottomOffset;
      //     this.$refs.table.layout.setHeight(height);
      //     this.$refs.table.doLayout();
      // }, 150);
    },
    // 为每条数据添加 key =index
    setIndex({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 扩展
    toggleExpand(row) {
      // let $table = this.$refs.table;
      // $table.toggleRowExpansion(row);
    },
    handleSizeChange(val) {
      // if (this.$parent.handleSizeChange) {
      //     this.$parent.handleSizeChange(val);
      // }
      // this.$refs.table.bodyWrapper.scrollTop = 0;
    },
    handleCurrentChange(val) {
      // if (this.$parent.handleCurrentChange) {
      //     this.$parent.handleCurrentChange(val);
      // }
      // this.$refs.table.bodyWrapper.scrollTop = 0;
    },
    // 选中选项发生变化时执行
    handleSelectChange(section) {
      if (this.$parent.handleSelectChange) {
        this.$parent.handleSelectChange(section);
      }
    },
    doDoubleClick() {
      if (this.$parent.doDoubleClick) {
        this.$parent.doDoubleClick();
      }
    },
    doRowClick(row) {
      if (this.$parent.doRowClick) {
        this.$parent.doRowClick(row);
      }
    },
    doSelectAll() {
      if (this.$parent.doRowClick) {
        this.$parent.doSelectAll();
      }
    },
    doSelect(selection, row) {
      if (this.$parent.doSelect) {
        this.$parent.doSelect(selection, row);
      }
    },
    doCellHover(row, column, cell, event) {
      if (this.$parent.doCellHover) {
        this.$parent.doCellHover(row, column, cell, event);
      }
    },
    doCellLeave(row, column, cell, event) {
      if (this.$parent.doCellLeave) {
        this.$parent.doCellLeave(row, column, cell, event);
      }
    },
    handleSortChange(column, prop, order) {
      if (this.$parent.handleSortChange) {
        this.$parent.handleSortChange(column, prop, order);
      }
    },
    //首列indexd递增
    indexMethod(index) {
      return (this.tableConfig.currentPage - 1) * this.tableconfig.pageSize + index + 1;
    },
    // cell 样式  数量和价格右对齐
    handleCellStyle(x) {
      /*if (x.column.property && x.column.property.toLowerCase().includes('price')) {
        return { 'text-align': 'right' };
      }
      if (x.column.property && x.column.property.toLowerCase().includes('quantity')) {
        return { 'text-align': 'right' };
      }*/
    },
    // 禁止选中
    checkStatus(row) {
      if (row.TaskStatus == '无法比价' || row.TaskStatus == '超时无法比价' || row.TaskStatus == '强制无法比价') {
        return false;
      } else if (row.TaskStatus == '已比价') {
        if (row.AcceptStatus == '已采纳' || row.AcceptStatus == '未采纳') {
          return false;
        } else {
          return true;
        }
      } else {
        return true;

      }
    }
  },
  computed: {
    hasClassSystemPagination() {
      return !!this.tableConfig.bottomSet.bottomOffset;
    },
  },
  watch: {
    config: {
      handler() {
        this.initConfig();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.mytable {
  ::v-deep .a-table__empty-block {
    height: 180px !important;
  }

  ::v-deep .a-table__body-wrapper {
    min-height: 240px !important;
  }

  ::v-deep .a-select {
    width: 100%;
  }

  .myHeader {
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
  }

  .myHeader:empty {
    display: none;
  }

  .myBody {
    padding: 10px 10px;
  }

  .myBody:empty {
    display: none;
  }

  .bg {
    background: #f4f6fb;
  }

  .myIcon {
    position: relative;
    margin-left: 20px;
  }

  .myIcon::before {
    content: ' ';
    display: inline-block;
    background: #1890ff;
    width: 5px;
    height: 21px;
    position: absolute;
    left: -20px;
    margin: 0px 5px;
  }

  .a-table {
    margin-bottom: 50px;

    .a-table__body {
      height: 100%;
    }

    ::v-deep .a-table__expand-icon {
      display: none;
    }
  }

  .system-pagination {
    position: fixed;
    bottom: 20px;
    background: #fff;
    right: 20px;
    text-align: right;
  }

  .normal {
    padding: 5px 10px;
    background: #fff;
    text-align: right !important;
  }

  @keyframes myMove {
    100% {
      opacity: 1;
      transform: translateY(0%);
    }

    60% {
      opacity: 0.4;
    }

    30% {
      opacity: 0.2;
    }

    0% {
      opacity: 0.1;
      transform: translateY(-50%);
    }
  }
}
</style>
